<template>
    <t-modal title="数据详情" destroyOnClose :width="1000" :visible="visible" wrapClassName="t-popup-modal"
        @cancel="handleCancel">
        <a-card :bordered="false" style="overflow-x: scroll; width: 1000; ">
            <div class="page-common-sub-box">
                <!-- <s-table ref="table" size="small" :columns="columns" :data="loadData" rowKey="columnName"
                    showPagination="auto" :rowClassName="rowClassName" :scroll="{ x: 'max-content' }" @rowClick="rowClick">
                    <span slot="serial" slot-scope="text, record, index">
                        {{ index + 1 }}
                    </span>
                </s-table> -->
                <s-table ref="table" size="small" :columns="columns" :data="loadData" rowKey="columnName"
                    showPagination="auto" :rowClassName="rowClassName" :scroll="scrollXY" @rowClick="rowClick">
                    <span slot="serial" slot-scope="text, record, index">
                        {{ index + 1 }}
                    </span>
                </s-table>
            </div>
        </a-card>
        <template slot="footer">
            <a-button key="back" @click="handleCancel">
                关闭
            </a-button>
        </template>
    </t-modal>
</template>

<script>
import {
    simpleListMixin
} from "@/mixins/simpleListMixin";
import {
    STable
} from "@/components";
export default {
    mixins: [simpleListMixin],
    components: {
        STable
    },
    props: {
        visible: {
            type: Boolean,
        },
    },
    data() {
        return {
            columns: [{
                title: "序号",
                width: 50,
                align: "center",
                scopedSlots: {
                    customRender: "serial",
                },
            },],
            rows: "", //选中行数据
            subHeight: 0,
            url: {
                getPageSet: "/system/sysDatabaseConnection/findColumnData",
            },
            // 加载数据方法 必须为 Promise 对象
            loadData: (parameter) => {
                this.columns = [{
                    title: "序号",
                    width: 50,
                    align: "center",
                    scopedSlots: {
                        customRender: "serial",
                    },
                },]
                const requestParameters = Object.assign({}, parameter, this.queryParam);
                return this.$post(this.url.getPageSet, requestParameters).then(
                    (res) => {
                        let keys = Object.keys(res.data.rows[0])
                        keys.map((item) => {
                            this.columns.push({
                                title: item,
                                dataIndex: item,
                                width: "auto",
                                align: "center",
                            })
                        })
                        return res.data;
                    }
                );
            },
        };
    },
    computed: {
        scrollXY() {
            let subHeight = this.subHeight ? this.subHeight : 500
            let height = subHeight - 40 - 40
            let width = 50 + 150 * this.columns.length - 1
            return { x: width, y: height };
        },
    },
    created() {
        this.$nextTick(() => {
            this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
        })
    },
    methods: {
        rowClick(e) {
            this.rows = e;
        },
        rowClassName(row) {
            return row.columnName === this.rows?.columnName ? "bg-bray" : ""; // 每条数据的唯一识别值
        },
        close() {
            this.$emit("close");
        },
        handleCancel() {
            this.close();
            this.columns = [{
                title: "序号",
                width: 50,
                align: "center",
                scopedSlots: {
                    customRender: "serial",
                },
            },]
        },
    },
};
</script>

<style lang="less"></style>
